<template>
	<div style="width: 400px;height: 200px;border:1px solid #2CC3CF;">
		<article style="width:100%;height:700px;  background:#B7F2E5;padding:0px;border:0px solid #2CC3CF;position: absolute;margin-top: -3px;">
			<figure>
				<marquee style="WIDTH: 100%; HEIGHT: 110px" scrollamount="12" direction="left">
					<center>
						<p>
							<font color="#008000" size="6.5">潇湘大药房开业啦！！！您的健康我们牵挂，一切从“心”开始......</font>
						</p>
						<p>
							<font color="#000000" size="5">本店招聘工作人员，如有意向请联系18073096065</font>
						</p>
					</center>
				</marquee>
				<div class=chui1 style="position: absolute;margin-top: -30px;">
					<p>
						<font color="#980512" size="6" />感谢胡为老师对本系统的大力支持！!</p>
				</div>
				<div class=chui2 style="position: absolute;margin-top: 0px;">
					<p>
						<font color="#980512" size="6" />感谢罗铁清老师对本系统的大力支持！!</p>
				</div>
				<div class="main_div" style="width: 600px;height: 600px;position: absolute;margin-left: 100px;">
					<ul id="uull">
						<li class="llii" v-for="(demo,index) in demoList" :key="index" :class="{'demo-left':demoStyle(index) == 0,'demo-active':demoStyle(index) == 1,'demo-right':demoStyle(index) == 2}">
							<img :src="demo.src" alt />
						</li>
					</ul>

				</div>
			</figure>
		</article>
	</div>

</template>
<script>
	export default {
		name: "demo",
		data() {
			return {
				demoList: [ // 图片列表
					{
						id: "0",
						src: require("../../assets/1.png")
					},
					{
						id: "1",
						src: require("../../assets/3.png")
					},
					{
						id: "2",
						src: require("../../assets/1.png")
					},
					{
						id: "3",
						src: require("../../assets/3.png")
					}
				],
				demoActive: 0, // 当前显示的li下标，设置为0，表示首次加载显示第一张图片
				demoTimer: null // 定时器，声明demoTimer方便停止轮播和重新开始![在这里插入图片描述](https://img-blog.csdnimg.cn/20191217174439432.gif)轮播
			}
		},
		methods: {
			// 根据返回值给li添加className
			demoStyle(index) {
				if (index == this.demoActive - 1) return 0;
				if (index == this.demoActive) return 1;
				if (index == this.demoActive + 1) return 2;
				if (this.demoActive == 0 && index == this.demoList.length - 1) return 0;
				if (this.demoActive == this.demoList.length - 1 && index == 0) return 2;
			},
			// 轮播执行
			demoCarousel() {
				this.demoActive++;
				if (this.demoActive > this.demoList.length - 1) {
					this.demoActive = 0;
				}
			}
		},
		mounted() {
			let _self = this;
			_self.$nextTick(function() {
				// 开始轮播，3秒一次
				_self.demoTimer = setInterval(_self.demoCarousel, 3000);
			});
		}
	}
</script>

<style>
	/* ul的样式： */
	#uull {
		position: absolute;
		width: 900px;
		height: 700px;
		transform: scale(0.6);
		margin-left: -200px;
		margin-top: -190px;
		display: flex;
	}

	/* 默认的li的dom样式，设置在整个ul水平且垂直居中的位置 */
	#uull .llii {
		position: absolute;
		width: 100%;
		height: 100%;
		transform: scale(0.4);
		margin-top: 50px;
		left: 355px;
		font-size: 0;
		/* 去除img标签留白，与轮播无关 */
		overflow: hidden;
		background: white;
		box-shadow: 0 0 10px 0 #dddddd;
		transition: 0.6s;
		z-index: 1;
	}

	/* 左边的li的dom样式，设置在整个ul水平靠左、垂直居中的位置 */
	#uull .demo-left {
		width: 100%;
		height: 100%;
		transform: scale(0.4);
		left: 0;
		z-index: 2;
	}

	/* 中间需要展示的li的dom样式，设置在整个ul水平靠右、垂直居中的位置 */
	#uull .demo-active {
		transform: scale(0.7);
		top: 0;
		bottom: 0;
		left: 215px;
		z-index: 3;
	}

	/* 右边的li的dom样式，设置在整个ul水平靠右、垂直居中的位置 */
	#uull .demo-right {
		transform: scale(0.4);
		left: 590px;
		z-index: 2;
	}

	/* 图片水平且垂直居中，可自定义设置，与轮播无关 */
	#uull .llii .img {
		position: absolute;
		width: 400px;
		height: 400px;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}

	.chui1 {
		width: 295px;
		position: absolute;
		margin-left: 25px;
		margin-top: 100px;
		color: #008000;
	}

	.chui2 {
		width: 295px;
		position: absolute;
		margin-left: 25px;
		margin-top: 130px;
		color: #008000;
	}
</style>
